<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平居中布局实现方式1:dispaly + text-algin</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#parent{
				width: 100vw;
				height: 200px;
				background-color: aqua;
				/* 
					3. 父级元素设置 text-algin 属性：最初是为文本内容设置对齐方式的
							left: 左对齐
							right: 右对齐
							center: 居中对齐
				*/
				
				text-align: center;
			}
			#child{
				width: 20vw;
				height: 200px;
				background-color: bisque;
				/* 
					4. 子级元素设置 dispaly 属性:
						block: 块级元素(width和height无效)
						inline: 内联元素(text-alige属性有效)
						inline-block: 行内块级元素(块级+内联)
				*/
				display: inline-block;
				/* 
					提示: text-algin具有继承性，导致子级元素的文本也居中显示,所以子级元素需要重新设置text-align属性
				*/
			}
			
			/* 
				5. dispaly + text-algin方案的优缺点：
				   优点：IE浏览器兼容性比较好
				   缺点： text-algin具有继承性，导致子级元素的文本也居中显示。 
			*/
		</style>
	</head>
	<body>
		<!-- 1. 定义父级元素 -->
		<div id="parent">
			<!-- 2. 定义子级元素 -->
			<div id="child">
				1:inline-block + text-algin
			</div>
		</div>
	</body>
</html>
